<template>
  <div class="detaile">
   
    <van-nav-bar left-text="详情" fixed left-arrow @click-left="$router.back()">
      <template #right>
        <svg class="icon more" aria-hidden="true">
          <use xlink:href="#icon-gengduo"></use>
        </svg>
      </template>
    </van-nav-bar>
 
    <div class="main" >
      <div id="poster">
      <div class="title">
        <span>{{ details.title }}
        </span>
      </div>
      <div class="author">
        <div class="author-l">
          <van-image crossOrigin = "anonymous" width="40" height="40" round :src="details.avatar" />
          <em>{{ details.author }}</em>
        </div>
        <span class="time">{{ details.time | conversion }}</span>
      </div>
      <div class="content">
        <span v-html="details.content">
        </span>
        <div class="img">
          <img crossOrigin = "anonymous" v-for="item in details.imageSrc" :key="item.id" :src="item" alt="">
        </div>
        <div class="like">
          <svg class="icon like-icon" aria-hidden="true">
            <use xlink:href="#icon-dianzan"></use>
          </svg>

          <span>{{ details.fav }}人收藏了这篇文章</span>
        </div>

      </div>
    </div>
      <div class="comment">
        <div class="commentTitle">
          <span>{{ commentList.length }}条评论</span>
        </div>
        <div v-if="commentList.length != 0">
          <div class="commentItem" v-for="item in commentList" :key="item.id">
            <van-image width="40" height="40" round :src="item.info.avatar" />
            <div class="item-r">
              <div class="top">
                <span>{{ item.info.nickname }}</span>
                <em>
                  <van-icon name="good-job" :color="item.is_like ? '#f00' : '#c8c7cc'" @click="CommentLike(item)" />
                </em>
              </div>
              <span class="commentTime">
                {{ item.create_time | conversion }}
              </span>
              <div class="commentContent">
                <span class="content">
                  {{ item.content }}
                </span>
                <van-button type="primary" size="mini" @click="reply(item)">{{ item.reply_num == 0 ? "" : item.reply_num
                }}回复</van-button>
              </div>

            </div>
          </div>
        </div>

        <div class="noComment" v-else>
          <svg class="icon no" aria-hidden="true">
            <use xlink:href="#icon-meiyoushuju"></use>
          </svg>
          <span style="display:block;">暂无评论，快来抢沙发。</span>
        </div>
      </div>


  </div>
    <div class="footer">
      <div class="menu">
        <div class="input" @click="unfoldComment">
          <span>
            我也来说两句
          </span>
        </div>
        <van-icon class="footerIcon" name="good-job-o" :color="details.is_like ? '#f00' : ''" @click="ifLike" />
        <van-icon class="footerIcon" name="star-o" :color="details.is_fav ? '#f00' : ''" @click="ifFav" />
        <van-icon class="footerIcon" name="share-o" @click="showShare = true" />
      </div>
    </div>


    <!-- 发布评论 -->
    <van-popup v-model="Commentshow" round position="bottom" :style="{ height: '30%' }">
      <van-field v-model="content" rows="2" autosize type="textarea" maxlength="50" :placeholder="placeholder"
        show-word-limit ref="content" />
      <van-button type="primary" block @click="comment">发送</van-button>
    </van-popup>



    <!-- 二级评论 -->

    <van-popup v-model="childShow" round position="bottom" :style="{ height: '30%' }">
      <van-field v-model="content" rows="2" autosize type="textarea" maxlength="50" :placeholder="placeholder"
        show-word-limit ref="content" />
      <van-button type="primary" block @click="ChildComment">发送</van-button>
    </van-popup>



    <!-- 全部回复 -->
    <van-popup v-model="allReplyShow" closeable close-icon="close" round position="bottom" :style="{ height: '90%' }">
      <div class="allReply">
        <div class="header" style="padding: 18px 0;border-bottom: 1px solid #ccc;">
          <span style="text-align: center; font-size: 24px; font-weight: 600;">全部回复</span>
          <!-- {{info}} -->
          <div>
            <div class="commentItem">
              <van-image width="40" height="40" round :src="info.avatar" />
              <div class="item-r">
                <div class="top">
                  <span>{{ info.nickname }}</span>
                  <em>
                    <van-icon name="good-job" color="#c8c7cc" />
                  </em>
                </div>
                <span class="commentTime">
                  {{ once.create_time | conversion }}
                </span>
                <div class="commentContent">
                  <span class="content">
                    {{ once.content }}
                  </span>
                </div>

              </div>
            </div>
          </div>
        </div>
        <div class="commentItem" v-for="item in allReply" :key="item.id">
          <van-image width="40" height="40" round :src="item.info.avatar" />
          <div class="item-r">
            <div class="top">
              <span>{{ item.info.nickname }}</span>
              <em>
                <van-icon name="good-job" color="#c8c7cc" />
              </em>
            </div>
            <span class="commentTime">
              {{ item.create_time | conversion }}
            </span>
            <div class="commentContent">
              <span class="content">
                {{ item.content }}
              </span>
            </div>

          </div>
        </div>
        <van-button type="primary" block @click="childComment">回复</van-button>
      </div>
    </van-popup>




    <!-- 分享 -->
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />


    <!-- 分享到微信 -->
    <van-popup v-model="wechatShow" round>
    <img :src="wechatSrc" alt="">
    <van-button type="primary" block @click="downloadImg">
      <a :href="wechatSrc" download="wechatSrc">{{test}}</a>
      </van-button>
    </van-popup>
  </div>
</template>

<script>
import { getArticleDetail } from '@/API/home';
import { getCommentList, addComment, getReplyList } from '@/API/api';
import { Popup, Field, Button, Badge, ShareSheet } from 'vant';
import methods from './likeMethods';
import Share from './Share';
export default {
  data() {
    return {
      details: [],
      commentList: [],
      Commentshow: false,
      content: '',
      reply_comment_id: 0,
      comment_type: 0,
      placeholder: '',
      allReplyShow: false,
      skip: 0,
      limit: 10,
      allReply: [],
      once: [],
      info: [],
      childShow: false,
      showShare: false,//分享
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
          { name: '二维码', icon: 'qrcode' },
          { name: '分享海报', icon: 'poster' },
          { name: '复制链接', icon: 'link' },

        ]
      ],
      wechatShow:false,
      wechatSrc:'',
      test:''

    }
  },

  components: {
    [Popup.name]: Popup,
    [Field.name]: Field,
    [Button.name]: Button,
    [Badge.name]: Badge,
    [ShareSheet.name]: ShareSheet,
  },
  created() {
    this.getDetail()
    this.getComment()
  },
  mounted() {

  },
  computed: {
    user_id() {
      return this.$store.state.users.uid
    },
    article_id() {
      return this.$route.query._id
    }
  },
  // mixins:[likeMethods],
  methods: {
    ...Share,
    ...methods,
    reply(item) {
      this.comment_type = 1
      this.reply_comment_id = item._id
      // 如果没有回复的话
      if (item.reply_num < 1) {
        this.Commentshow = true
        this.placeholder = '回复:' + item.info.nickname
        this.$nextTick(function () {
          this.$refs.content.focus()
        })
      } else {
        this.allReplyShow = true
        let { skip, limit, user_id, reply_comment_id, article_id } = this
        getReplyList({
          skip, limit, user_id, reply_comment_id, article_id
        }).then(res => {
          if (res.code == 0) {
            this.info = item.info
            this.once = item
            console.log(res);
            this.allReply = res.data
          }
        })

      }

    },
    childComment() {

      this.childShow = true
      this.placeholder = '回复' + this.info.nickname
      this.$nextTick(function () {
        this.$refs.content.focus()
      })
      this.comment_type = 1
      this.reply_comment_id = this.once._id


    },
    ChildComment() {
      let { user_id, article_id, content, reply_comment_id, comment_type } = this
      content = content.trim()
      if (content == '') return this.$toast('请输入评论内容')
      addComment({
        user_id, article_id, content, reply_comment_id, comment_type
      }).then(res => {
        if (res.code == 0) {
          this.content = ""
          this.placeholder = ''
          this.childShow = false
          this.$toast(res.msg)
          this.comment_type = 0
          this.reply_comment_id = 0
          this.placeholder = ''
          let { skip, limit } = this
          getReplyList({
            skip, limit, user_id, reply_comment_id, article_id
          }).then(res => {
            if (res.code == 0) {
              this.allReply = res.data
            }
          })
        }
      })

    },
    unfoldComment() {
      this.placeholder = '请输入内容'
      this.Commentshow = true
      this.$nextTick(function () {
        this.$refs.content.focus()
      })



    },
    // 发布评论
    comment() {
      let { user_id, article_id, content, reply_comment_id, comment_type } = this
      content = content.trim()
      if (user_id == '') {
        this.$toast('请先登陆后再来评论')
        setTimeout(() => {
          this.$router.push('/login')
        }, 500);
        return
      }
      if (content == '') return this.$toast('请输入评论内容')
      addComment({
        user_id, article_id, content, reply_comment_id, comment_type
      }).then(res => {
        if (res.code == 0) {
          this.Commentshow = false
          this.$toast(res.msg)
          this.comment_type = 0
          this.reply_comment_id = 0
          this.content = ""
          this.placeholder = ''
          this.getComment()
        }
      })
    },
    // 文章评论

    getComment() {
      let { user_id, article_id } = this
      getCommentList({
        article_id,
        user_id,
      }).then(res => {
        if (res.code == 0) {
          this.commentList = res.data
          console.log(res.data);
        }
      })
    },
    // 文章详情
    getDetail() {
      let { user_id, article_id } = this
      getArticleDetail({
        user_id,
        article_id
      }).then(res => {
        if (res.code == 0) {
          console.log(res.data);
          this.details = res.data

        }
      },
        (err => {
          this.$toast(err.msg)
        }))
    }
  },

}
</script>

<style lang="less" scoped>
::v-deep .van-button--block {
  margin-top: 20px;
}
a{
  color: black;
}
::v-deep [data-v-3bf48eb6] .van-button--block{
  margin-top: 0;
}
::v-deep .van-popup {
  box-sizing: border-box;
  padding: 18px;
  background-color: #fff;
}

.detaile {
  width: 375px;
  height: 100vh;
  background-color: rgb(244, 246, 246);

}

.main {
  background-color: rgb(244, 246, 246);
  width: 375px;
  box-sizing: border-box;
  padding: 18px;

  padding-bottom: 80px;
  padding-top: 70px;

  .title {
    span {
      font-weight: bold;
      font-size: 28px;
      color: rgb(51, 51, 51);
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      /* 这里是超出几行省略 */
      overflow: hidden;

    }
  }

  .author {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    &::after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      left: 0;
      bottom: -10px;
      height: 1px;
      background-color: #c8c7cc;
      transform: scaleY(0.5);
    }

    .author-l {
      width: 50%;
      display: flex;
      align-items: center;

      em {
        margin-left: 10px;
        font-size: 12px;
      }

    }

    .time {
      font-size: 14px;
      color: rgb(168, 168, 168);
    }
  }

  .content {
    width: 100%;
    margin-top: 20px;
    // background-color: rgb(244, 246, 246);

    span {
      line-height: 2;
      font-size: 14px;
      word-wrap: break-word;
      word-break: break-all;
    }

    // poster_type 一张图片
    .img {
      img {
        width: 100%;
      }
    }

    .like {
      padding: 20px 0;
      width: 100%;
      box-sizing: border-box;
      text-align: center;

      .like-icon {
        font-size: 18px;
        color: #5E81B5;
      }

      span {
        display: block;
        color: #ccc;
      }
    }

    .commentTitle {
      width: 100%;
    }

  }

  .comment {
    width: 100%;

    .commentTitle {
      span {
        font-weight: 500;
        font-size: 18px;
      }

    }

    .commentItem {
      margin-top: 20px;
      width: 100%;
      display: flex;

      .item-r {
        margin-left: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;

        &::after {
          content: '';
          display: block;
          position: absolute;
          width: 100%;
          left: 0;
          bottom: -7px;
          height: 1px;
          background-color: #5E81B5;
          transform: scaleY(0.5);
        }

        .top {
          display: flex;
          justify-content: space-between;

          span {
            font-size: 14px;
          }

          em {
            font-size: 18px;
            color: #a8a8a8;
          }
        }

        .commentTime {
          font-size: 12px;
          color: #a8a8a8;
          margin-bottom: 10px;
        }
      }
    }

    .noComment {
      width: 100%;
      text-align: center;
      color: #5E81B5;

      .no {
        font-size: 100px;

      }
    }

    .commentContent {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .content {
        width: 70%;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* 这里是超出几行省略 */
        overflow: hidden;
      }
    }
  }
}

.footer {
  width: 375px;
  background-color: #5E81B5;
  box-sizing: border-box;
  padding: 8px;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;


  .menu {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .input {
      background-color: #f6f6f6;
      width: 60%;
      height: 25px;
      border-radius: 40px;
      padding: 5px 10px;
      color: #bbb;
    }

    .footerIcon {
      font-size: 24px;
      color: #f6f6f6;
    }
  }
}

::v-deep .van-nav-bar {
  background-color: @baseColor;
}

::v-deep .van-nav-bar .van-icon {

  color: #fff;
}

::v-deep .van-nav-bar::after {
  border-bottom: 1px solid #ccc;
}

::v-deep .van-nav-bar .van-nav-bar__text {
  color: #fff;
}

.more {
  color: #fff;
  font-size: 24px;
}

.allReply {
  width: 100%;
  background-color: #fff;
  height: 40px;

  .commentItem {
    margin-top: 20px;
    width: 100%;
    display: flex;

    .item-r {
      margin-left: 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;

      // &::after {
      //   content: '';
      //   display: block;
      //   position: absolute;
      //   width: 100%;
      //   left: 0;
      //   bottom: -7px;
      //   height: 1px;
      //   background-color: #5E81B5;
      //   transform: scaleY(0.5);
      // }

      .top {
        display: flex;
        justify-content: space-between;

        span {
          font-size: 14px;
        }

        em {
          font-size: 18px;
          color: #a8a8a8;
        }
      }

      .commentTime {
        font-size: 12px;
        color: #a8a8a8;
        margin-bottom: 10px;
      }
    }
  }
}
</style>